<div class="modal fade" id="account-subject-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myLargeModalLabel">회계 계정 과목</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">

                <div class="accordion" id="accordionExample">
                    {% for d1 in d1_account %}
                        <div class="card mb-0">
                            <div class="card-header bg-primary" id="heading-{{ forloop.counter }}">
                                <h5 class="m-0">
                                    <a class="custom-accordion-title {% if forloop.counter > 1 %}collapsed{% endif %} d-block pt-1 pb-1 text-white"
                                       data-toggle="collapse" href="#collapse-{{ forloop.counter }}"
                                       aria-expanded="true" aria-controls="collapse-{{ forloop.counter }}">
                                        {{ d1 }}{#  - {{ d1.description }} #}
                                    </a>
                                </h5>
                            </div>

                            <div id="collapse-{{ forloop.counter }}"
                                 class="collapse {% if forloop.first %}show{% endif %}"
                                 aria-labelledby="heading-{{ forloop.counter }}" data-parent="#accordionExample">
                                <div class="card-body">
                                    <div class="border-bottom">
                                        {% for d2 in d2_account.pop %}
                                            <div class="bg-light border-left border-top border-right p-1">{{ d2 }}</div>
                                            <div class="pl-2 pr-2">
                                                {% for d3 in d3_account.pop %}
                                                    <div class="row">
                                                        <div class="col-4 border-top border-left p-1">{{ d3 }}</div>
                                                        <div class="col border-top border-left border-right p-1">{{ d3.description }}</div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
